{% extends "app/base_site.html" %}
{% block title %} {% if  "add" == handle %}添加{% else %}编辑{% endif %}员工 {% endblock title %}
{% block stylesheets %}
  {{ block.super }}
        <link rel="stylesheet" href="/static/lib/jquery/fancybox/3.5.7/jquery.fancybox.min.css" />
    <style>
    input[type="file"]{
      color: #8d2f2f;
      font-size: 12px;
    }
    ::file-selector-button{
      font-size: 12px;
      color: #fff;
      border-radius: 4px;
      border: 1px solid #2a80eb;
      padding: 2px 4px;
      background-color: #2a80eb;
      cursor: pointer;
    }

</style>
{% endblock stylesheets %}
{% block content %}

  <div class="right_col" role="main">
    <div class="">
      <div class="row">
        <div class="col-md-12 col-xs-12">
          <div class="x_panel">
            <div class="x_title">
                <h2>{% if  "add" == handle %}添加{% else %}编辑{% endif %}员工 <span id="top_msg">{{top_msg}}</span></h2>
              <div class="clearfix"></div>
            </div>
            <div class="x_content">
              <br>
              <form class="form-horizontal form-label-left"  method="post" enctype="multipart/form-data" data-parsley-validate  >

                     <input type="hidden" name="handle"  value="{{ handle }}">
                     <input type="hidden" name="code"  value="{{ obj.code }}">

                <div class="form-group">
                  <label class="control-label col-md-3 col-sm-3 col-xs-12">编号 </label>
                  <div class="col-md-3 col-sm-3 col-xs-12">
                     <input type="text"  value="{{ obj.code }}" class="form-control" disabled="disabled">
                  </div>
                </div>

               <div class="form-group">
                  <label class="control-label col-md-3 col-sm-3 col-xs-12">员工名称 <span class="required">*</span></label>
              <div class="col-md-3 col-sm-3 col-xs-12">
                    <input type="text" name="name" value="{{ obj.name }}" required="required"  class="form-control">
                  </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-md-3 col-sm-3 col-xs-12">员工照片 <span class="required">*</span></label>

                    <div class="col-md-3 col-sm-3 col-xs-12">
                        <input type="file" name="file" accept="image/png,image/jpeg,image/jpg" class="form-control" placeholder="员工照片" >

                    </div>

                </div>

{% if "edit" == handle %}

                  <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12">员工照片</label>
                  <div class="col-md-9 col-sm-9 col-xs-12">
                    <img style="width: 100px;height:100%;" src="{{ uploadStaffDir_www }}{{ obj.image_path }}" title="照片">
                  </div>
                </div>
                  <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12">员工人脸照片</label>
                  <div class="col-md-9 col-sm-9 col-xs-12">
                    <img style="width: 100px;height:100%;" src="{{ uploadStaffDir_www }}{{ obj.face_image_path }}" title="照片">
                  </div>
                </div>
{% endif %}

                  <div class="form-group">
                  <label class="control-label col-md-3 col-sm-3 col-xs-12">备注
                  </label>
                  <div class="col-md-9 col-sm-9 col-xs-12">
                    <textarea name="remark" class="form-control" rows="3" placeholder="">{{ obj.remark }}</textarea>
                  </div>
                </div>

                <div class="form-group">
                  <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
                    <button type="button" onclick="window.history.go(-1)" class="btn btn-primary">取消</button>
                    <button type="submit" class="btn btn-success">提交</button>
                  </div>
                </div>

              </form>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
{% endblock content %}

{% block javascripts %}
  {{ block.super }}
    <script src="/static/lib/jquery/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>

let handle = "{{ handle }}";
let ele_input_name= $("input[name='name']");
let ele_input_file= $("input[name='file']");
let ele_textarea_remark= $("textarea[name='remark']");

$(document).ready(function () {
   $("form").submit(function () {
        if(ele_input_name.val().trim() === ""){
            myAlert("请输入员工名称","error");
            return false;
        }

       if("add" === handle){
            //添加
           if(ele_input_file[0].files.length > 0){
                let file = ele_input_file[0].files[0];
                let fs_name = file.name;
                let fs_size = parseInt(file.size);//文件字节大小
                let fs_size_m = parseInt(fs_size / 1024 / 1024); //换算成M单位

                if(fs_size_m > 5){
                    myAlert("员工照片文件不能超过5M:"+String(fs_size_m),"error");
                    return false;
                }
           }else{
               myAlert("请上传员工照片","error");
               return false;
           }

       }else {
            //更新

       }

   });

   $('img').click(function() {
        $.fancybox.open({
            src  : $(this).attr('src'),
            type : 'image'
        });
    });
});

</script>

{% endblock javascripts %}
